<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script>
var int = self.setInterval("ajax()",5000);//每5秒查询一下
function ajax(){
	var xmlHttp = null;
	var oldstr = document.getElementById('realtime').innerText;
	if (window.XMLHttpRequest){
		xmlHttp = new XMLHttpRequest();
	}
	else if(window.ActiveXObject){
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(xmlHttp != null){
		xmlHttp.open("get", "./sensor/data.txt", true);
		xmlHttp.send();
		xmlHttp.onreadystatechange = doResult; 
	}
	function doResult(){
		if(xmlHttp.readyState == 4){
			if (xmlHttp.status == 200){
				var newstr = xmlHttp.responseText.replace(/\n|\r/g,"");//去掉换行符
				if(oldstr != newstr){//判断是否有新数据
					document.getElementById("realtime").innerHTML = newstr;
					var node=document.createElement("ul");
					var textnode=document.createTextNode(newstr);
					node.appendChild(textnode);
					document.getElementById("history").appendChild(node);
				}
			}
		}
	}
}
</script>
 <head>
  <meta name="viewport" content="width=720,initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0, user-scalable=yes"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>传感器数据</title> 
  <link rel="stylesheet" type="text/css" href="style.css" /> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="header"> 
    <h1>传感器数据</h1> 
   </div> 
   <div class="menu"> 
    <ul class="nav"> 
     <li><a href="index.html">主页</a></li> 
     <li><a href="page1.html">荷塘月色</a></li> 
     <li><a href="rand.html">掷骰子</a></li> 
     <li><a href="test.html">测试网页</a></li> 
    </ul> 
   </div> 
   <div class="content"> 
	<p align="center" style="font-size: 2rem">实时数据：</p>
	<p id="realtime" align="center" style="font-size: 4.5rem; word-break:break-all;"></p>
	<p align="center" style="font-size: 2rem">历史数据：</p>
	<p id="history" style="margin: 0 auto; width: 75%; height: 600px; overflow: scroll"></p>

   </div> 
  </div>   
 </body>
</html>